<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 400 400">

        <defs>
            <filter id="f11">
                <feMorphology  operator="erode" radius="1"/>
            </filter>

            <filter id="f12">
                <feMorphology  operator="erode" radius="3"/>
            </filter>
        </defs>

        <text x="10"  y="120" font-size="100">dmc good</text>
        <text x="10"  y="250" font-size="100"  filter="url(#f11)">dmc good</text>
        <text x="10"  y="380" font-size="100" filter="url(#f12)">dmc good</text>
    </svg>


    <svg width="400" height="400" viewBox="0 0 400 400">

        <defs>
            <filter id="f21">
                <feMorphology  operator="dilate" radius="1"/>
            </filter>

            <filter id="f22">
                <feMorphology  operator="dilate" radius="3"/>
            </filter>
        </defs>

        <text x="10"  y="120" font-size="100">dmc good</text>
        <text x="10"  y="250" font-size="100" filter="url(#f21)">dmc good</text>
        <text x="10"  y="380" font-size="100" filter="url(#f22)">dmc good</text>
    </svg>

    <svg width="400" height="400" viewBox="0 0 400 400">

        <defs>
            <filter id="f31">
                <feMorphology  operator="dilate" radius="1"/>
            </filter>

            <filter id="f32">
                <feMorphology  operator="dilate" radius="5"/>
            </filter>
        </defs>

        <rect x="10" y="10" width="100" height="100" fill="rgb(100,0,0)"/>
        <rect x="10" y="120" width="100" height="100" fill="rgb(100,0,0)" filter="url(#f31)"/>
        <rect x="10" y="240" width="100" height="100" fill="rgb(100,0,0)" filter="url(#f32)"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <linearGradient id="l4"
                x1="0" y1="0"
                x2="1" y2="0"
                >
                <stop offset="0" stop-color="#f00" stop-opacity="1"/>
                <stop offset=".5" stop-color="#ff0" stop-opacity="1"/>
                <stop offset="1" stop-color="#fff" stop-opacity="1"/>
            </linearGradient>
            <filter id="f41">
                <!-- <feDropShadow dx="0" flood-color="#f00" stdDeviation="0"></feDropShadow> -->
                <feMorphology id="SourceAlpha"  operator="dilate" radius="2" result="r1"/>
                <feFlood  flood-color="#dd2" flood-opacity="1" result="r2"/>
                <feComposite in="r2" in2="r1" operator="in" result="r3"/>

                <feMerge>
                    <feMergeNode in="r3"/>
                    <feMergeNode in="SourceGraphic"/>
                </feMerge>
            </filter>

            <filter id="f32">
                <feMorphology  operator="dilate" radius="5"/>
            </filter>
        </defs>

        <image xlink:href="../imgs/7.png" x="10" y="10" height="80" width="80" filter="url(#f41)"/>
    </svg>

   
    <script src="index.js"></script>
</body>
</html>